<template>
  <div>
  	<a-row>
		<a-col :span="12"  class='mb20'>
				<a-input  placeholder="请输入项目名称"  style='width:200px'  v-model='search.keyWord'/>
				<a-button type="primary" @click='pageInit()'>搜索</a-button>
		</a-col>
	</a-row>
	<a-row  class='mb20'>
		<a-col >   
	      	<router-link  to='/project/add'><a-button type="primary" icon="plus-circle">新建</a-button></router-link>
	    </a-col>
	</a-row>
	<a-table :columns="columns" :dataSource="data"  :pagination="pagination"   @change="handleTableChange">
		<span slot="createtime"  slot-scope="text, record">{{text | formatDate}}</span> 
		<span slot="prjStatus"  slot-scope="text, record"  :style='text==1 ? "color: red":(text==2 ? "color:#78d478":"") '>{{text | prjStatus}}</span> 
		<span slot="relate_order"  slot-scope="text, record" >
			<router-link  :to='{path:"/order",query:{prjCode:record.code}}' v-if='record.prjStatus == 2'><a-button size='small' >查看</a-button></router-link>
			<span v-else>暂无</span>
		</span> 
		<span slot="action" slot-scope="text, record"> 
		  <span  v-if='record.prjStatus == 2'> 
			  <router-link  :to='{path:"/order/add",query:{record}}'   class='color-blue'>新增订单</router-link>
			  <a-divider type="vertical" />
		  </span>
		  <router-link  :to='{path:"/project/getInfo",query:{code:record.code}}'   class='color-blue'>查看</router-link> 
		  <a-divider type="vertical" />
		  <router-link  :to='{path:"/project/edit",query:{code:record.code}}'   class='color-blue'>编辑</router-link> 
		  <a-divider type="vertical" />
			<a-popconfirm title="确认删除当前数据？" @confirm="confirmDel(record.code)"   okText="确认" cancelText="取消">
			    <span class='color-red cursor'>删除</span>
			</a-popconfirm>
		</span>
	</a-table>
  </div>
</template>

<script>
import { listProject,delProject }  from  '@/api/project/index'
export default {
  name: 'project',
  data () {
    return {
      	columns:[{
			  dataIndex: 'name',
			  key: 'name',
			  title:'项目名称', 
			}, {
			  title: '买方',
			  dataIndex: 'buyerName',
			}, {
			  title: '供应商',
			  dataIndex: 'supName',
			}, {
			  title: '状态',
			  dataIndex: 'prjStatus',
			  scopedSlots: { customRender: 'prjStatus' },
			},{
			  title: '负责人',
			  dataIndex: 'principalName',
			}, {
			  title: '相关订单', 
			  scopedSlots: { customRender: 'relate_order' },
			}, 
			{
			  title: '创建时间',
			  dataIndex: 'createTime',
			  scopedSlots: { customRender: 'createtime' },
			},  
			{
			  title: '操作',
			  key: 'action',
			  scopedSlots: { customRender: 'action' },
			}],
		search:{
			keyWord:'',
			pageNo:1,
			pageSize:10,
			entCode:''
		},
		pagination:{
	        total:0,
	        pageSize: 10,//每页中显示10条数据
	        showSizeChanger: true, 
	        pageSizeOptions: ["10", "20"],//每页中显示的数据
	        showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
	    }, 
		data:[ ],//table_data
		                                                                               
    }
  },
  created(){
  	this.search.entCode = this.$store.state.entCode
  	this.pageInit() 
  },
  methods:{
  	pageInit(){
  		listProject(this.search).then((res)=>{
  			if(res.data.flag == true){
  				this.data = res.data.dataList
  				this.pagination.total = res.data.totalRs
  			} 
  		})
  	},
  	confirmDel(code){
		delProject(code).then((res)=>{
			if(res.data.flag == true){
				this.$message.success(res.data.msg)
				this.pageInit()
			}
		})
    },
    handleTableChange (pagination, filters, sorter) { 
        this.search.pageNo = pagination.current
        this.search.pageSize =pagination.pageSize
        this.pageInit()
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ant-input{width: 200px;}
</style>
